<script>
export default {
  name: 'user component',
  data() {
    return {
      users: [
        { id: 1001, name: '李某芳', gender: 'female' },
        { id: 2002, name: '王某琴', gender: 'female' },
        { id: 3003, name: '杨某俊', gender: 'male' },
      ],
      user: {
        id: '',
        name: '',
        gender: ''
      }
    }
  },
  created() {
    console.log( 'User组件被创建' );
  },
  updated() {
    console.log( 'User组件被更新' );
  },
  unmounted() {
    console.log( 'User组件被卸载' );
  },
  beforeRouteEnter(to, from, next) {
    console.log( 'User beforeRouteEnter - from:', from );
    console.log( 'User beforeRouteEnter - to:', to );
    
    let callback = vm => {
      console.log('next ~ callback');
      let x = vm.users.find( u => u.id == to.params.id );
      Object.assign( vm.user , x );
    }
    // 在 next 内部会调用 callback 函数
    next( callback );
  },
  beforeRouteUpdate(to, from) {
    console.log( 'User beforeRouteUpdate - from:', from );
    console.log( 'User beforeRouteUpdate - to:', to );
    console.log( `User beforeRouteUpdate - 从${from.params.id}到${to.params.id}` );
    let x = this.users.find( u => u.id == to.params.id );
    Object.assign( this.user, x );
  },
  beforeRouteLeave(to, from) {
    console.log( 'User beforeRouteLeave - from:', from );
    console.log( 'User beforeRouteLeave - to:', to );
  }
}
</script>

<template>
  <div>
    <h3>用户信息</h3>
    <ul>
        <li>id: {{user.id}}</li>
        <li>name: {{user.name}}</li>
        <li>gender: {{user.gender}}</li>
    </ul>
  </div>
</template>